layui.use(['table','layer','jquery'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.$;

    //第一个实例
    table.render({
        elem: '#demo'
        ,url: 'http://api.shopping.com/api/item/sku/list' //数据接口
        ,page: true //开启分页
        ,limit:5 //每一页显示5条数据
        ,limits:[1,2,3,5,10,20,30,50] //列表显示的每一页显示的条数
        ,toolbar:"default" //显示工具头信息
        ,cols: [[ //表头
            {field: 'no', type:"checkbox", width:"5%", sort: true, fixed: 'left'}
            ,{field: 'id', title: '商品编号',align:"center", width:"10%"}
            ,{field: 'title', title: '商品名称',align:"center", width:"20%",templet:"<div>{{showTilte(d.title)}}</div>", sort: true}
            ,{field: 'price', title: '单价',align:"center", width:"20%",templet:"<div>{{d.price/100+'.00'}}</div>",sort:true}
            ,{field: 'createTime', title: '发布时间',align:"center",templet:"<div>{{layui.util.toDateString(d.createTime,'yyyy-MM-dd')}}</div>", width:"13%"}
            ,{field: 'lastUpdateTime', title: '更新时间',align:"center",templet:"<div>{{layui.util.toDateString(d.lastUpdateTime,'yyyy-MM-dd')}}</div>", width:"13%"}
            ,{field: 'op', title: '操作',align:"center", width:"19%",templet:"#barDemo"}
        ]]
    });

    /*********行工具条监听************/
    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.open({
                type: 2,
                shade: true,
                area: ['600px','400px'],
                maxmin: false,
                anim:1,
                title:"商品详情",
                content:'/forward/skuDetail',
                zIndex: layer.zIndex, //重点1
                success: function(layero){
                    layer.setTop(layero); //重点2
                    //获得弹出的窗口的body部份
                    var body = layui.layer.getChildFrame("body");
                    //显示数据
                    body.find("#pic").prop("src",data.images);
                    body.find("#id").html(data.id);
                    body.find("#name").html(showTilte(data.title));
                    body.find("#title").html(data.title);
                    body.find("#price").html(data.price/100+'.00');
                    body.find("#createTime").html(layui.util.toDateString(data.createTime,'yyyy-MM-dd'));
                    body.find("#updateTime").html(layui.util.toDateString(data.updateTime,'yyyy-MM-dd'));
                }
            });

        } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);

                //获得要删除的这一行数据，对应的id
                var id = data.id;
                //发出ajax请求，调用后台微服务，执行删除操作
                $.ajax({
                    url:"http://api.shopping.com/api/item/sku/del/"+data.id,
                    type:"delete",
                    success:function () {
                        layer.alert("商品删除成功！");
                    }
                });

            });
        } else if(layEvent === 'edit'){
            layer.open({
                type: 2,
                shade: true,
                area: ['600px','400px'],
                maxmin: false,
                anim:1,
                title:"修改详情信息",
                content:'/forward/updateSku',
                zIndex: layer.zIndex, //重点1
                success: function(layero){
                    layer.setTop(layero); //重点2
                    //获得弹出的窗口的body部份
                    var body = layui.layer.getChildFrame("body");
                    //显示数据
                    //调置要修改的商品id
                    body.find("#id").val(data.id);
                    body.find("#title").val(data.title);
                    body.find("#price").val(data.price);
                    body.find("#demo1").prop("src",data.images);
                }
            });

        }
    });
    /*****************头部工具条的监听事件*************************************/
//监听头工具栏事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
        switch(obj.event){
            case 'add':
                layer.open({
                    type: 2,
                    shade: true,
                    area: ['600px','400px'],
                    maxmin: false,
                    anim:1,
                    title:"添加数据",
                    content:'/forward/saveSku',
                    zIndex: layer.zIndex, //重点1
                    success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });

                break;
            case 'update':

                break;
            case 'delete':

                break;
        };
    });
});

function showTilte(title){
    //按空格将内容分割成数组
    var titles = title.split(" ");
    return titles[0]+"-"+titles[1];
}

